<template>
  <div class="app-container" v-loading="loading">
    <el-tabs tab-position="top">
      <el-tab-pane label="飞书配置" v-if="checkRole(['admin'])">
        <div style="width: 100%">
          <el-form ref="form" :model="sysFlyingBook" label-width="80px">
            <el-form-item label="secret_id" prop="secret_id">
              <el-input
                v-model="sysFlyingBook.secretId"
                placeholder="请输入secret_id"
              />
            </el-form-item>
            <el-form-item label="secret_ket" prop="secret_ket">
              <el-input
                v-model="sysFlyingBook.secretKet"
                placeholder="请输入secret_ket"
              />
            </el-form-item>
            <el-form-item label="请求接口地址" prop="receive_id">
              <el-input
                v-model="sysFlyingBook.receiveId"
                placeholder="请输入请求接口地址"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="bookPublic">确 定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="检测配置" v-if="checkRole(['admin'])">
        <div style="width: 100%">
          <el-form ref="form" :model="sysExamine" label-width="80px">
            <el-form-item label="secret_ket" prop="secret_ket">
              <el-input
                v-model="sysExamine.secretKet"
                placeholder="请输入secret_ket"
              />
            </el-form-item>
            <el-form-item label="阈值" prop="threshold">
              <el-input
                v-model="sysExamine.threshold"
                placeholder="请输入阈值"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="examinePublic">确 定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { addExamine, updateExamine } from "@/api/system/examine";
import {
  addFlying_book,
  updateFlying_book,
  getsubstation,
} from "@/api/system/flying_book";
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数

export default {
  data() {
    return {
      sysExamine: {},
      sysFlyingBook: {},
      loading: false,
    };
  },
  created() {
    this.websiteConfig();
    this.getLoginRegisterTheme();
  },
  methods: {
    checkPermi,
    checkRole,
    //获取到网站配置信息数据
    websiteConfig() {
      getsubstation().then((res) => {
        this.sysExamine =
          res.data.sysExamine == null ? {} : res.data.sysExamine;
        this.sysFlyingBook =
          res.data.sysFlyingBook == null ? {} : res.data.sysFlyingBook;
      });
    },
    //打开新页面
    toPage(url) {
      window.open(url, "_blank");
    },
    //站点配置保存修改操作
    examinePublic() {
      this.loading = true;
      if (this.sysExamine.id) {
        updateExamine(this.sysExamine).then((res) => {
          this.$modal.msgSuccess("操作成功");
          this.loading = false;
          this.websiteConfig();
        });
      } else {
        addExamine(this.sysExamine).then((res) => {
          this.$modal.msgSuccess("操作成功");
          this.loading = false;
          this.websiteConfig();
        });
      }
    },
    //支付配置
    bookPublic() {
      this.loading = true;
      if (this.sysFlyingBook.id) {
        updateFlying_book(this.sysFlyingBook).then((res) => {
          this.$modal.msgSuccess("操作成功");
          this.loading = false;
          this.websiteConfig();
        });
      } else {
        addFlying_book(this.sysFlyingBook).then((res) => {
          this.$modal.msgSuccess("操作成功");
          this.loading = false;
          this.websiteConfig();
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.setting-drawer-block-checboxs {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.setting-drawer-block-checbox-items {
  position: relative;
  padding: 8px; /* 设置内边距而非外边距 */
  padding-bottom: 0;
  border-radius: 2px;
  cursor: pointer;
  box-sizing: border-box; /* 包括内边距和边框 */
}

.setting-drawer-block-checbox-items img {
  width: 100%; /* 让图片填满容器宽度 */
  height: auto; /* 保持图片的纵横比 */
}
.setting-drawer-block-checbox-items img {
  height: 90px; /* 设置手机端图片的高度 */
}
.setting-drawer-block-checbox-selectIcons {
  text-align: center;
  margin-top: -1px;
  color: #1890ff;
  font-weight: 700;
  font-size: 14px;
}

/* 媒体查询：调整到手机端 */
@media (max-width: 768px) {
  .setting-drawer-block-checbox-items {
    flex: 1 1 calc(50% - 16px); /* 每行两个项 */
  }

  .setting-drawer-block-checbox-items img {
    height: 90px; /* 设置手机端图片的高度 */
    object-fit: cover; /* 保持图片填充容器 */
    text-align: center;
  }
}
</style>
